<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="1"></reviewTabs>
          </view>
          <view class="box">
            <view class="left">
              <view class="list">
                <view class="item">
                  <view class="item_top" v-if="bookName">
                    <view class="item_title">
                      <text>{{ bookName }}</text>
                    </view>
                  </view>
                  <view class="item_bottom" v-if="chapterList.length > 0">
                    <view class="item_content">
                      <view
                        class="item_box"
                        v-for="(item, index) in chapterList"
                        :key="index"
                        :class="{
                          active: index === currentChapterIndex,
                        }"
                        @click="handleChangeChapter(index)"
                      >
                        <view class="item_line"></view>
                        <view class="item_dot">
                          <view
                            class="item_text"
                            :class="{
                              active: item.complete,
                            }"
                          >
                            <view>{{ item.shortName }}</view>
                            <text>
                              {{ item.complete === 1 ? "已拉通" : "未拉通" }}
                            </text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="item_arrow">
                      <view class="item_line"></view>
                      <view class="item_icon"> </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="right">
              <view class="title"> 已通过学新 </view>
              <view class="radio">
                <view class="radio_content">
                  <u-radio-group
                    v-model="currentBookIndex"
                    @change="handleChangeRadio"
                    :width="'100%'"
                    active-color="#0785CD"
                  >
                    <u-radio
                      v-for="(item, index) in bookList"
                      :key="index"
                      :name="index"
                    >
                      {{ item.bookEdition }}{{ item.bookYear }}
                    </u-radio>
                  </u-radio-group>
                </view>
              </view>
              <view class="btn">
                <view class="btn_content" @click="handleView('1')">
                  <text>查看</text>
                </view>
                <view class="btn_content" @click="handleView('2')">
                  <text>重学</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBooksByType, getChaptersByType } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      bookList: [],
      currentBookIndex: 0,
      chapterList: [],
      currentChapterIndex: 0,
    };
  },
  computed: {
    bookName() {
      if (!this.bookList[this.currentBookIndex]) return "";
      return (
        this.bookList[this.currentBookIndex].bookEdition +
        this.bookList[this.currentBookIndex].bookYear
      );
    },
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getBooksByType("ltsfx").then((res) => {
        this.bookList = res.data;
        this.getChapterList();
      });
    },
    getChapterList() {
      getChaptersByType(
        "ltsfx",
        this.bookList[this.currentBookIndex].bookId
      ).then((res) => {
        this.chapterList = res.data;
      });
    },
    handleView(type) {
      uni.navigateTo({
        url: `/pages/review/review2Info?chapterId=${
          this.chapterList[this.currentChapterIndex].chapterId
        }&type=${type}`,
      });
    },
    handleChangeRadio(e) {
      this.currentBookIndex = e;
      this.getChapterList();
    },
    handleChangeChapter(index) {
      if (index === this.currentChapterIndex) return;
      this.currentChapterIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review2";
</style>
